<template>
  <div class="page">
    <Header title="确认订单" :back="true" />
    <div class="onform">
      <div class="img_bg">
        <img style="width:100%" src="/src/assets/images/index/scenic_bg.png" alt="">
      </div>
      <div class="commodity_information">
        <div class="commodity_information_img_box">
          <div class="img_box">
            <van-image lazy-load width="100%" height="100%" :src="`https://admin.028wlkj.com:1020/api/file/show/image/${ticketTypesDetail?.productImage}`" radius=".8rem" />
          </div>
          <div class="round round_left" />
          <div class="round round_right" />
        </div>
        <div class="order_info">
          <div class="order_info_header">
            {{ scenicDetail?.scenicAreaName }}
            -
            {{ ticketTypesDetail?.peopleGroupStr }}
          </div>
          <div class="order_info_time">
            <span class="order_info_time_list" v-if="bookDate">使用时间：{{ bookDate }}</span>
            <span class="order_info_time_list" v-if="ticketTypesDetail.checkStartTime && ticketTypesDetail.checkEndTime">
              {{ticketTypesDetail.checkStartTime}}-{{ticketTypesDetail.checkEndTime}}
            </span>
          </div>
        </div>
      </div>
      <div class="ticket_type type_list">
          <div class="header">
              门票种类
          </div>
          <div class="card ticket_type_card">
              <span class="ticket_name">{{ ticketTypesDetail.ticketName }}</span>
              <div class="ticket_Number_and_price">
                  <span class="price">
                      <span class="price_icon">￥</span>
                      {{ ticketTypesDetail.marketPrice }}
                  </span>
                  <span class="number">
                      <!--                {{ valuenumber }}-->
                      <van-stepper v-model="valuenumber" @change="handelvaluenumber" max="99" />
                  </span>
              </div>
          </div>
      </div>
      <div class="chuxren type_list">
          <!-- <div  v-if="matchedResults.length" style=" background: #F9F8F3; color: #999999; padding-left: 0.5rem; height: 3rem;margin-top: 1.5rem;">
              出行人( {{ matchedResults.length  }} 位出行人)
          </div> -->
          <div class="header">
              出行人(请选择
              <span style="color: var(--van-primary-color)">{{ touristNumber }} </span>
              位出行人)
          </div>
          <div class="chuxren-1" style="box-shadow: 0px 7px 15px 0px rgba(54,141,88,0.05);">
            <div class="passenger_header">
              <div class="name">{{ ticketTypesDetail.ticketName }}</div>
              <div class="add" @click="show = true">
                <van-icon name="plus" />
                添加
              </div>
            </div>
            <div class="passenger_list_box" v-show="matchedResults.length">
              <div class="list" v-for="item in matchedResults" :key="item.id">
                <div>
                  <div class="name">{{ item.name }}</div>
                  <div class="id_card">
                    身份证：
                    {{ item.idCard }}
                  </div>
                </div>
                <img class="close_img" @click="handeldelinfo(item.id)" src="../../assets/images/icons/Frame60@2x.png" alt="">
              </div>
            </div>
            <van-field class="field" v-model="tel" label="联系电话"
                       placeholder="请输入手机号" input-align="right" type="tel" />

          </div>
      </div>
      <Choicetraveler
        v-if="listpersons"
        :showPopup="show"
        :listpersons="listpersons"
        :valuenumber="touristNumber"
        :selectList="matchedResults"
        @onSelect="onSelect"
        @closePopup="closePopup"
      />
    </div>
    <div class="bottom_pay">
      <div class="bottom_pay_content">
        <div class="pay_button" @click="handelpay">
          支付
        </div>
        <div class="price_box">
            应付金额：
            <span class="price">
          ￥
          <span class="number">
            {{ allPrice }}
          </span>
      </span>
          </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, toRaw, onActivated, computed } from 'vue'
import { showToast } from 'vant';
import {onBeforeRouteLeave, useRoute, useRouter} from "vue-router"
import Header from '@/components/header/Header.vue'
import Choicetraveler from '@/components/choicetraveler/Choicetraveler.vue'
import { userStore } from "@/stores/user.js"
import { goPayUrl } from '@/utils/pay.js'

defineOptions({
  name: 'scenicOrder',
})

onBeforeRouteLeave((to, from) => {
  const needSaveRoute = ['addApedestrian']
  determineNeedSaveKeepALive(to, from, needSaveRoute, 'scenicOrder')
})

const user = userStore()
const router = useRouter()
const route = useRoute()
const userlist = ref([])
import api from '@/api/index.js'
import {determineNeedSaveKeepALive} from "@/utils/routerKeepALive.js";
let valuenumber = Number(route?.query?.vanum)

const bookDate = route?.query?.bookDate // 预订时间

let productid = route?.query?.productid   //商品id
let sessionid = route?.query?.sessionid  //场次id
const valuenum = ref(valuenumber)
const tel = ref(null)
const listpersons = ref([])
const idCardArray = ref([])
const fileUrl = import.meta.env.VITE_FILE_URL
const show = ref(false)
const selectedItems = ref([])


const closePopup = () => {
    show.value = false
    matchedResults.value?.forEach((item, index) => {
        if (!item.pandaPassengerId) {
            _getPandaTouristId(item.id, index)
        }
    })
}
const _getPandaTouristId = (id, index) => {
    api.getPandaTouristId(id).then((res) => {
        matchedResults.value[index].pandaPassengerId = res.data
    })
}

const matchedResults = ref([]);

const touristNumber = ref(0)
const ticketTypesDetail = ref(null)
const scenicDetail = ref(null)
const initDate = () => {
  ticketTypesDetail.value = JSON.parse(localStorage.getItem('ticketTypesDetail'))
  scenicDetail.value = JSON.parse(localStorage.getItem('scenicDetail'))
  touristNumber.value = ticketTypesDetail.value.unitQuantity * valuenum.value
  console.log('touristNumber.value', touristNumber.value)
}
initDate()


const allPrice = computed(() => {
    return valuenum.value * (ticketTypesDetail.value.marketPrice * 1000) / 1000
})
const onSelect = (val) => {
    matchedResults.value = val
    idCardArray.value = toRaw(matchedResults.value).map((item) => item.id);
}

// 添加出行人
function handelcx(key) {
    const newArrayOfMatchedItems = toRaw(listpersons.value).filter((item) => item.id === key);
    // 检查是否已存在匹配项
    const existingIndex = matchedResults.value.findIndex(item => item.id === key);
    if (existingIndex !== -1) {
        // 如果匹配项已存在，从matchedResults中删除它
        matchedResults.value.splice(existingIndex, 1);
    } else {
        // 否则，将新的匹配结果与之前的匹配结果合并到matchedResults数组中
        matchedResults.value.push(...newArrayOfMatchedItems);
    }
    idCardArray.value = toRaw(matchedResults.value).map((item) => item.id);
}


function handeldelinfo(id) {

    matchedResults.value = matchedResults.value.filter(item => item.id !== id);
    idCardArray.value = toRaw(matchedResults.value).map((item) => item.id);


}
const isSelected = (key) => {
    return selectedItems.value.includes(key);
};

const handelitem = (key) => {

    handelcx(key); // 在条件满足时执行
};




const handelvaluenumber = (val) => {
  valuenum.value = val
  touristNumber.value = ticketTypesDetail.value.unitQuantity * val
}

// 获取出行人列表
function getapedestrianlist() {
    api.getapedestrian().then((res) => {
        listpersons.value = res.data
    }).finally(() => {

    })
}
onActivated(() => {
    ticketTypesDetail.value = JSON.parse(localStorage.getItem('ticketTypesDetail'))
    getapedestrianlist()
})
getapedestrianlist()

// 创建订单
function handelpay() {
  if (valuenumber !== idCardArray.value.length) {
    showToast(`请选择${touristNumber.value}位出行人`)
    return
  }
  const idCardList = []
  matchedResults.value?.forEach((item) => {
    idCardList.push([item.pandaPassengerId])
  })
    // return
  const data = {
    phone: tel.value,
    goodsDto: {
      buyCount: valuenumber,
      frequencyId: sessionid,
      idCardIdsTxt: idCardList,
      skuId: productid,
      useTime: bookDate
    },
    siteCode: "1721450663617105920"
  }
  const path = window.location.origin
  const locationgo=` ${path}${'/#/order?title=scenic'}`
    api.createScenicOrder({...data,finishUrl:locationgo}).then((res) => {
      if (res.code == 200 && res.data != null && res.success == true) {
        _openH5PayUrl(res.data)
        // pay.getPayld({ orderNumber: res.data })
      }
    })

}

const _openH5PayUrl = (orderNumber) => {
    const data = {
        longitude: user.position?.coords?.longitude || 35.6761919,
        latitude: user.position?.coords?.latitude || 139.6503106,
        orderNumber
    }
    api.openH5PayUrl(data).then((res) => {
        goPayUrl({ payId: res.data.payNumber })
    })
}

</script>

<style lang="scss" scoped>
:deep(.van-cell) {
  padding: 1rem;
}
.page{
  height: 100vh;
  display: flex;
  flex-direction: column;
  .onform {
    flex: 1;
    position: relative;
    height: 100%;
    overflow-y: auto;
    background-color: #F9F8F3;
    .img_bg{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 10vh;
    }
    .commodity_information{
      margin: 2.4rem 1.5rem 1.5rem 1.5rem;
      border-radius: 1rem;
      overflow: hidden;
      .commodity_information_img_box{
        position: relative;
        background: #ffffff;
        padding: 0 1.5rem;
        .img_box{
          height: 8.7rem;
          padding: 1.5rem 0;
          border-bottom: 1px dashed #eeeeee;
          :deep(.van-image__img){
            object-fit:cover;
          }
        }
        .round{
          position: absolute;
          bottom: 0;
          width: 2.4rem;
          height: 2rem;
          background-color: #F9F8F3;
          border-radius: 50%;
        }
        .round_left{
          left: 0;
          transform: translateX(-50%) translateY(50%);
        }
        .round_right{
          right: 0;
          transform: translateX(50%) translateY(50%);
        }
      }
      .order_info{
        background: #ffffff;
        padding: 1.2rem 1.5rem 1.5rem 1.5rem;
        .order_info_header{
          font-size: 1.8rem;
          font-weight: bold;
          color: #333333;
          line-height: 2.5rem;
        }
        .order_info_time{
          margin-top: 0.6rem;
          font-size: 1.4rem;
          color: #999999;
          line-height: 1.6rem;
          .order_info_time_list{
            margin-right: 1rem;
          }
        }
      }
    }
  }
  .bottom_pay{
    z-index: 1;
    height: 9rem;
    background-color: #FFFFFF;
    .bottom_pay_content{
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      padding: 1rem 2rem 0 0;
      box-sizing: border-box;
    }
    .pay_button{
      height: 3.8rem;
      line-height: 3.8rem;
      background: var(--van-primary-color);
      border-radius: .5rem;
      opacity: 1;
      width: 32px;
      font-size: 1.6rem;
      color: #FFFFFF;
      padding: 0 3rem;
      margin-left: 1rem;
      white-space: nowrap;
    }
    .pay_button:active{
      background-color: var(--van-primary-button-active-color);
    }
    .price_box{
      display: flex;
      align-items: center;
      font-size: 1.4rem;
      color: #999999;
      .price{
        font-size: 1.4rem;
        color: #ED6316;
        line-height: 1.6rem;
        font-weight: bold;
        .number{
          font-size: 2.2rem;
          font-weight: bold;
          color: #ED6316;
          line-height: 2.6rem;
        }
      }
    }
  }
}
.type_list {
    padding: 0 1.5rem;

    .header {
        margin: 1.5rem 0 1rem 0;
        font-size: 1.4rem;
        color: #999999;
    }

    .card {
        padding: 1.9rem 1.5rem;
        background: #FFFFFC;
        box-shadow: 0 .7rem 1.5rem 0 rgba(54, 141, 88, 0.05);
        border-radius: 1rem;
    }

    .ticket_type_card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        width: calc(100vw - 6rem);

        .ticket_name {
            color: #333333;
            font-size: 1.6rem;
            font-weight: bold;
            flex: 1;
            margin-right: 1rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .ticket_Number_and_price {
            display: flex;
            align-items: center;

            .price {
                font-size: 1.8rem;
                font-weight: bold;
                color: #ED6316;
                white-space: nowrap;
                margin-right: 1rem;

                .price_icon {
                    font-size: 1.4rem;
                }
            }

            .number {
                font-size: 1.4rem;
                font-weight: bold;
                color: #333333;
                white-space: nowrap;
            }
        }
    }
}

.chuxren {
    width: calc(100vw - 3rem);
}

.img-bg {
    position: absolute;
    z-index: -1;
    margin-top: 1rem;
}

.onform-img {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 20rem;
    width: calc(100vw - 3rem);
    //margin: 0 1.5rem 0 1.5rem;
    background: #ffffff;
    border-radius: 1rem;
    overflow: hidden;
    //padding: 1rem;
    box-sizing: border-box;
    //margin-top: 2rem;
    margin: 2.4rem 1.5rem 1.5rem 1.5rem;
    .img_box{
      height: 8.7rem;
      padding: 1.5rem 0;
      border-bottom: 1px dashed #eeeeee;
    }
}

.time {
    display: flex;
    align-items: center;
    color: #999999;
    margin-top: .6rem;
    font-size: 1.4rem;
}

.onform-img>div {
    height: calc(100%/2);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* margin-top: 1rem; */
    /* border-top: 1px dashed #EEEEEE; */
}

.onform-img>div:nth-of-type(2) {
    height: 30%;
    width: 100%;
    margin-top: 6rem;
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* border-top: 1px dashed #EEEEEE; */
}



.onform-img-info {
    color: #333333;
    font-weight: 600;
    font-size: 1.8rem;
    width: 95%;
}

.onform-img>div:nth-of-type(1) {
    width: 100%;
    height: 60%;
    overflow: hidden;
    border-radius: 0.5rem;
}

.img {
    width: 100%;
    /* 外部div的宽度 */
    height: 100%;
    /* 外部div的高度 */
    overflow: hidden;
    /* min-height: 6rem; */
    border-radius: 0.5rem;
    /* overflow: hidden; */
}

.img img {
    width: 100%;
    /* 图片宽度占满外部div */
    height: 100%;
    /* 图片高度占满外部div */
    object-fit: cover;
    /* 保持图片完全显示，并填充整个容器 */
    border-radius: 1rem;
}

.zlei {
    margin-top: 1.5rem;
    height: 10rem;
    width: calc(100vw - 1rem);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;

}

.zlei>div:nth-of-type(1) {
    color: #999999;
}

.zlei-1 {
    width: 100%;
    background: #ffffff;
    border-radius: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333333;
    font-weight: 600;
    font-size: 1.6rem;
    margin: 1.9rem 0;
}

.zlei-1>span:nth-of-type(1) {
    width: 9rem;
    display: flex;
    align-items: center;
    padding-left: 1.5rem;
      margin-right: 0.5rem;
}

.zlei-1-num {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.zlei-1-num-but {
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    padding-right: 1.5rem;
    .add{
      height: 3rem;
      line-height: 3rem;
      background: rgba(0,0,0,0.05);
      border-radius: .5rem;
      padding: 0 1.5rem;
    }

}

.zlei-1-num-but>div:nth-of-type(1) {
    width: 70%;

    height: 100%;
    display: flex;
    align-items: center;
    /* flex-wrap: wrap; */
    justify-content: space-around;
}



.chuxren {
    /* overflow-y: auto; */
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}

.chuxren-1 {
    width: 100%;
    /* overflow-y: auto; */
    border-radius: 1rem;
    background: #ffffff;
    padding-bottom: 1.5rem;
  .passenger_header{
    padding: 1.9rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .name {
      font-size: 1.6rem;
      font-weight: bold;
      color: #333333;
    }
    .add{
      height: 3rem;
      line-height: 3rem;
      background: rgba(0,0,0,0.05);
      border-radius: .5rem;
      padding: 0 1.5rem;
      white-space:nowrap;
    }
    .add:active{
      opacity: 0.5;
    }
  }
  .passenger_list_box{
    margin: 0 1.5rem 1.5rem 1.5rem;

    .list{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem;
      background: rgba(79,172,145,0.05);
      .name{
        font-size: 1.4rem;
        color: #333333;
        line-height: 2rem;
        font-weight: bold;
      }
      .id_card{
        font-size: 1.2rem;
        color: #666666;
        line-height: 1.4rem;
      }
      .close_img{
        width: 2.4rem;
        height: 2.4rem;
      }
    }
  }
  .field{
    border-radius: .5rem;
    margin: 1.5rem;
    background-color: rgba(79, 172, 145, 0.05);
    width: calc(100% - 3rem);
  }
}

.peoinfo {
    width: 95%;
    /* height: 100%; */
    min-height: 6rem;
    overflow-y: auto;
    background: rgba(79, 172, 145, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;


}

.peoinfo>div {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 5rem;
    overflow-y: auto;
    

}

.peoinfo>div>div {
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 6rem;
    border-bottom: 1px solid rgb(238, 238, 238);
}

.peoinfo>div>div>div:nth-of-type(1) {
    width: 90%;
    /* width: 100%; */
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    /* border: 1px solid red; */
}

.peoinfo>div>div>div:nth-of-type(1)>span {
    width: 100%;
    margin-left: 1.5rem;
    margin-top: 1rem;
    font-weight: normal;
    color: #333333;
    padding-left: 1rem;
    box-sizing: border-box;

}

.peoinfo>div>div>div:nth-of-type(2) {
    /* height: 100%; */

}

.lianxitel {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    height: 4rem;
    width: 95%;
    /* background: rgba(79, 172, 145, 0.05); */
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.lianxitel>div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lianxitel>div>span {
    /* width: 5rem; */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pay {
    position: absolute;
    bottom: 0px;
    height: 6rem;
    width: 100%;
    background: #ffffff;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    display: flex;
    align-items: center;

}

.pay>div:nth-of-type(1) {
    width: 30%;
    height: 100%;
}

.pay>div:nth-of-type(2) {
    width: 70%;
    /* height: 100%; */
}

.pay-1 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.pay-1>div:nth-of-type(1) {
    width: 70%;
    /* height: 70%; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pay-total {
    width: 100%;
    height: 70%;
    padding-right: 1.5rem;
}

.button {
  position: relative;
  border-radius: .5rem;
  color: var(--van-primary-color);
  text-align: center;
  padding: 0 1.5rem;
  /* margin: 0.5rem; */
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background-size: cover;
  background-repeat: no-repeat;
  .button_bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

}

.scrollable-div {
    width: 30rem;
    /* 适当调整宽度 */
    overflow-x: auto;
    /* 启用横向滚动 */
    white-space: nowrap;

}

.action_button {
    /* width: 6rem;
    color: var(--van-primary-color); */
    /* background: var(--van-primary-color); */
    /* background-image: url(../../assets/images/icons/Group800.png);
    background-repeat: no-repeat; */
    /* display: flex;
    align-items: center;
    justify-content: center;
    height: 1rem; */

}

.round {
    position: absolute;
    /* border: 1px solid red; */
    z-index: 999;
    height: 2rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 3rem;
}

.round>span {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    overflow: hidden;
    background: #F9F8F3;

}

.ticket_name-ss {
    overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;


}</style>
